﻿@using DAL;
@using DataProj.Areas.BackSys.ServiceTools;
@{
    ViewBag.Title = "投诉登记";
    Layout = "../Shared/_LayoutBase.cshtml";
    string loginType = MySession.GetSession("loginType");
    var detail = (MySession.GetSession_UserInfo("detail") as UserInfo);
    string userName = detail.UserName;
    string phone = detail.Phone;
    string IDCard = detail.IDCard;
}
@*@model List<string>*@
@section CssLink{


}
<div id="app">

    <!-- page heading start-->
    <div class="page-heading">
        <h3>
            投诉单填写
        </h3>
        <ul class="breadcrumb">
            <li>
                <a href="">物流管理系统</a>
            </li>
            <li class="active"> 投诉管理 </li>
            <li class="active"> 投诉单填写 </li>
        </ul>
    </div>
    <!-- page heading end-->
    <!--body wrapper start-->
    <section class="wrapper">
        <!-- page start-->
        <div class="row">
            <div class="col-lg-6">
                <section class="panel">
                    <header class="panel-heading">
                        投诉单填写
                    </header>
                    <div class="panel-body center">
                        <form class="form-horizontal adminex-form" method="post">
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">投诉主题</label>
                                <div class="col-sm-10">
                                    <select id="Title" class="form-control m-bot15">
                                        <option>未收到货</option>
                                        <option>质量问题</option>
                                        <option>人员问题</option>
                                        <option>其他</option>
                                    </select>
                                    <span class="help-block">投诉主题</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">快递单号</label>
                                <div class="col-sm-10">

                                    <select id="BagID"  class="form-control m-bot15">
                                            <option v-if="bagIDs==null">没有查询到快递</option>
                                            <option v-else v-for="bagID in bagIDs">{{bagID}}</option>
                                    </select>
                                    <span class="help-block">要受理的快递单号</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">用户姓名</label>
                                <div id="TrueName_div" class="col-sm-10">
                                    <input v-model="TrueName" type="text" class="form-control " >
                                    @*<span id="TrueName_tip" class="help-block">您的姓名</span>*@
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">联系电话</label>
                                <div id="Phone_div" class="col-sm-10">
                                    <input v-model="Phone" type="text" class="form-control" >
                                    @*<span id="Phone_tip" class="help-block">您的联系电话</span>*@
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 col-sm-2 control-label">身份证号</label>
                                <div id="IDCard_div" class="col-sm-10">
                                    <input v-model="IDCard" class="form-control" >
                                    <span id="IDCard_tip" class="help-block">您的身份证号</span>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-sm-2 control-label">投诉信息</label>
                                <div id="Info_div" class="col-sm-10">
                                    <textarea rows="10" class="form-control" id="Info"></textarea>
                                    <span id="Info_tip" class="help-block">具体投诉信息</span>
                                </div>
                            </div>
                            @*<div class="form-group">
                                    <label class="col-sm-2 control-label">回复</label>
                                    <div id="Info_div" class="col-sm-10">
                                        @if (MySession.GetSession("loginType") != null && MySession.GetSession("loginType").ToString().Equals("用户"))
                                        {
                                            <textarea rows="10" class="form-control" id="ReplyInfo" disabled=""></textarea> }
                                        else
                                        {
                                            <textarea rows="10" class="form-control" id="ReplyInfo"></textarea>
                                        }

                                        <span id="ReplyInfo_tip" class="help-block">回复</span>
                                    </div>
                                </div>*@

                            <div class="form-group">
                                <div class="col-sm-4"></div>
                                <button id="reset_btn" type="reset" class="center btn btn-info" >重置</button>
                                <button type="button" class="center btn btn-primary"  data-toggle="modal" data-target="#addModal">提交</button>

                            </div>
                        </form>
                    </div>
                </section>
                <input id='act' value='keep' style="visibility: hidden">
                <!-- 模态框示例（Modal） -->
                <form method="post" class="form-horizontal" role="form" id="form_data"  style="margin: 20px;">
                    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close"  data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        投诉信息提交确认
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label for="remark" class="col-sm-3 control-label center ">确认要提交吗?</label>
                                        @*<div class="col-sm-9">
                                                <input type="text" class="form-control" id="update_updateDate" name="updateDate">
                                            </div>*@
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button  type="button" class="btn btn-default" data-dismiss="modal">
                                        取消
                                    </button>
                                    <!-- <button type="submit" onclick="trigger_delete()" class="btn btn-primary" data-dismiss="modal">
                                        确认
                                    </button><span id="tip"> </span> -->
                                    <button type="button" v-on:click="check_form('add')" class="btn btn-primary">
                                        确认
                                    </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                </form>
                <!--body wrapper end-->
                <!--footer section start-->
                <!--footer section end-->


            </div>
        </div>
        <!-- main content end-->
    </section>
</div>

@section JavascriptLink{
}
@section Javascript{

    <script>
          var vm = new Vue({
                el: "#app",
              data: {
                  bagIDs:[],
                   TrueName: '',
                   IDCard: '',
                   Address:'',
                   ContactAddress: '',
                   Title:'',
                   Info: '',
                   BagID: '',
                   Phone: '',
                },
               methods: {

                   formatDateTime : function (str) {
                       if (str == "") return str;
                       var now = new Date(parseInt(str.replace("/Date(", "").replace(")/", ""), 10));
                       var year = now.getFullYear();  //取得4位数的年份
                       var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                       var date = now.getDate();      //返回日期月份中的天数（1到31）
                       var hour = now.getHours();     //返回日期中的小时数（0到23）
                       var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
                       var second = now.getSeconds(); //返回日期中的秒数（0到59）
                       return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
                   },
                    formatDateTime2:function(str) {
                        if (str == "") return str;
                        console.log(str);
                        var now = new Date(str);
                        var year = now.getFullYear();  //取得4位数的年份
                        var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
                        /*   if (month < 10) month = '0' + month;*/
                        var date = now.getDate();      //返回日期月份中的天数（1到31）
                        //if (date < 10) date = '0' + date;
                        var hour = now.getHours();     //返回日期中的小时数（0到23）
                        //if (hour < 10) hour = '0' + hour;
                        var minute = now.getMinutes(); //返回日期中的分钟数（0到59）
                        if (minute < 10) minute = '0' + minute;
                        var second = now.getSeconds(); //返回日期中的秒数（0到59）
                        if (second < 10) second = '0' + second;
                        return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second;
                    },

                   empty_check: function () {
                       if (!this.Info) {
                           return false;
                       }
                       if (!this.IDCard) {
                           return false;
                       }
                       return true;
                   },

                        // 提交表单
                   check_form: function () {
                       modal = $('#addModal');
                       if (!this.empty_check()) {
                           commonUtil.message('输入内容不得为空', 'danger');
                           modal.modal('hide');
                           return false;
                       }
                       var act = $.trim($('#act').val());
                       var sendData = [];
                       var sendUrl = '';
                     
                       sendUrl = '@Url.Action("Add","Complaint")';
                       sendData.append('ID', this.ID);
                       sendData.append('Action', act);
                       sendData.append('TrueName', this.TrueName);
                       sendData.append('Info', this.Info);
                       sendData.append('BagID', this.BagID);
                       sendData.append('Title', this.Title);
                       sendData.append('Phone', this.Phone);
                       sendData.append('IDCard', this.IDCard);
                       sendData.append('AddTime', this.AddTime);
                       sendData.append('UpdateTime', this.UpdateTime);
                       //console.log(sendData);
                       // 异步提交数据到Action/GetBagItemByID页面
                       axios({
                           url: sendUrl,
                           method: "post",
                           responseType: 'json',
                           data: sendData,
                           transformRequest: [function (data) {
                               // 对 data 进行任意转换处理
                               $("#tip").html("<span style='color:blue'>正在处理...</span>");
                               return data;
                           }],
                           // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                           transformResponse: [function (data) {
                               // 对 data 进行任意转换处理
                               return data;
                           }],

                       }).then((data) => {
                           if (data.data > 0) {
                               $("#tip").html("<span style='color:blueviolet'>" + act + "成功！</span>");
                               // document.location.href='system_notice.php'
                               alert("提交成功");
                               //console.log("成功了");
                               modal.modal('hide');
                               commonUtil.alert('注册成功', 'success');
                               //location.reload();
                           }
                           else {
                               $("#tip").html("<span style='color:red'>失败，请重试</span>");
                               modal.modal('hide');
                               alert('操作失败');

                           }
                       }).catch(error => {
                           alert(error);
                           modal.modal('hide');
                       });

                    },


                   getBagIDs() {
                       sendUrl = '@Url.Action("GetBagIDs","Complaint")'
                       axios({
                           url: sendUrl,
                           method: "post",
                           responseType: 'json',
                           data: {},
                           transformRequest: [function (data) {
                               // 对 data 进行任意转换处理
                               $("#tip").html("<span style='color:blue'>正在处理...</span>");
                               return data;
                           }],
                           // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
                           transformResponse: [function (data) {
                               // 对 data 进行任意转换处理
                               return data;
                           }],

                       }).then((datas) => {
                           datas = JSON.parse(datas.data);
                           this.bagIDs = datas;
                       }).catch(error => {
                           alert(error);
                       });
                   }


                },
                watch: {
                    Info: {
                        deep: true,
                        handler(obj) {
                            if (!this.Info) {
                                $('#Info_div')[0].className = 'col-sm-10 has-error';
                                $('#Info_tip')[0].innerText = '收件人姓名输入不合法';
                            } else {
                                $('#Info_div')[0].className = 'col-sm-10 has-success';
                                $('#Info_tip')[0].innerText = '输入正确 ';
                            }
                        }
                    },
                    IDCard: {
                        deep: true,
                        handler(obj) {
                            if (!this.IDCard) {
                                $('#IDCard_div')[0].className = 'col-sm-10 has-error';
                                $('#IDCard_tip')[0].innerText = '发件人地址输入不合法';
                                trigger_stay();
                                flag = false;
                            } else {
                                $('#IDCard_div')[0].className = 'col-sm-10 has-success';
                                $('#IDCard_tip')[0].innerText = '输入正确';
                            }
                        }
                    }

               },
              mounted: function () {
                  this.TrueName = '@userName';
                  this.Phone = '@phone';
                  this.IDCard = '@IDCard';
                  this.getBagIDs();
               },
              created() {

                   $('#addModal').on('hide.bs.modal', function () {
                       // 关闭时清空edit状态为add
                       $('#reset_btn').click();
                       return false;
                   });
                }
            });
    </script>
}
